import { Text, View } from '@tarojs/components';
import React from 'react';
import styles from './index.module.scss';

const History = ({ className = '', onSearch, history, onClear }) => {
  if (!history?.length) {
    return null;
  }

  return (
    <View className={`${styles.History} ${className}`}>
      <View className="header">历史搜索</View>

      <View className="content-list omit-2">
        {history?.map((key) => {
          return (
            <View
              className="item"
              key={key}
              onClick={() => {
                onSearch(key);
              }}
            >
              <View className="txt">{key}</View>
            </View>
          );
        })}
      </View>

      <Text className="at-icon at-icon-trash clear" onClick={onClear} ></Text>
    </View>
  );
};

export default History;
